A partir d'aquest punt començarem a parlar dels fonaments de CSS o com funciona CSS.
He creat un exercici amb un h1 que té un id i una classe i un css amb sis selectors que apunten al h1 per donar-li estils.
<h1 id="title" class="title">Fonaments de CSS
h1{
background-color:red;
}
.title{
background-color: blue;
}
#title{
background-color: green;
}
h1.title{
background-color: yellow;
}
h1#title{
background-color: teal;
}
h1.title#title{
background-color: coral;
}
Quin és el selector que guanyarà i acabarà per donar-li estil a l'h1?
Si treiem l'anul·lació del CSS feta amb els comentaris, veurem de quin color es pinta.
Si és la primera vegada que veieu aquesta configuració en CSS, podríeu pensar que els estils que estan per sota sobreescriuen als que estan a dalt.
Què passa Si agafem l'última regla i la posem a dalt de tot?
Això passa perquè l'especificitat d'aquest selector és la més alta i gunaya sobre totes les altres.
L'especificitat estableix com és d'específic un selector per saber quin estil s'aplicarà.
Com es calcula l'especificitat?
La fórmula que segueix el navegador és la següent: En una regla determinada, els elements del CSS tenen un valor, el navegador suma els valors de tots els elemnts i el que tingui la suma més alta guanya.
Els valors dels elements són els següents:
Si anem al CSS i posem el cursor sobre un selector, VSC es dirà quina és la seva especificitat.
El selector que guanya és el que suma 111 punts.
Imagineu que tenim un CSS de 700 linies i ve un nou desenvolupador web i posa el seu selector pel background-color al final...
.title {
background-color: red;
}
Ho posa i no funciona. Ho torna a intentar i posa.
h1.title {
background-color: red;
}
i tampoc funciona. Al final, quan ha provat moltes maneres i cap funciona, decideix posar un !important
h1.title {
background-color: red !important;
}
i ara si que li funciona!
Què ha passat en realitat?
Quan posem un !important ens estem carregant l'especificitat. !important guanya a totes les puntacions.
Imagineu que arriba un nou desenvolupador web i vol donar estil al h1, segueix la mateixa lògica que el seu precedent i escriu...
h1.title {
background-color: blue !important;
}
Aquesta última sobreescriurà la precedent.
Si treiem el h1 i ho deixem així
.title {
background-color: blue !important;
}
Ara guanya el vermell altre cop!
Quina és el truc per no tornar-se boig a l'hora d'escriure un CSS correcte?
És utilitzar sempre les classes
.title {
background-color: teal;
}
Tot això es modificarà una mica quan treballem amb pseudo-classes i pseudo-elements. Modificarem una mica aquesta regla que hem explicat.
CSS Specificity Graph Generator és una web en la qual es pot mirar si el vostre CSS és correcte o no.
Un gràfic amb molts pics vol dir que esteu tenint molts problemes amb l'especificitat i que el CSS no és bo.
Els estils en cascada funciona sempre que l'especificitat sobre l'element sigui la mateixa.
.title {
background-color: teal;
}
.title {
background-color: yellow;
}
Si la especificitat no és la mateixa, torna a guanyar el color teal.
h1.title {
background-color: teal;
}
.title {
background-color: yellow;
}
Utilitzem sempre classes per la cascada no estigui afectada.